<script setup>
import http from "@/utils/http.js";
import { onMounted, ref } from "vue";
import { Search } from '@element-plus/icons-vue'

const finds = ref({
    goodsName: ''
})

const goodsData = ref([])
const getGoods = async () => {
    const res = await http.get('/goods/condition', { params: finds.value })
    goodsData.value = res.data
}

const clear = () => {
    finds.value = { goodsName: '' }
    getGoods()
}

onMounted(() => {
    getGoods()
})

</script>

<template>
    <div class="home-product">
        <div class="search-container">
            <div class="search-box">
                <el-input v-model="finds.goodsName" placeholder="请输入商品名称进行搜索..." :prefix-icon="Search" clearable
                    size="large" @keyup.enter="getGoods" />
                <el-button type="primary" size="large" @click="getGoods">搜索</el-button>
                <el-button type="warning" size="large" @click="clear">重置</el-button>
            </div>
        </div>

        <div class="box">
            <ul class="goods-list">
                <li v-for="goods in goodsData" :key="goods.GoodsId" class="goods-item">
                    <router-link :to="`/detail/${goods.goodsId}`">
                        <img :src="goods.goodsPhoto || 'https://img.tukuppt.com/png_preview/00/11/69/840wwqEs8Z.jpg!/fw/780'" alt="商品图"
                            class="goods-img" />
                        <div class="goods-name">{{ goods.goodsName }}</div>
                        <div classclass="goods-price">￥{{ goods.goodsPrice }}</div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<style scoped lang='scss'>
.search-container {
    text-align: center;
    padding: 30px 20px;
    background-color: #f5f7fa;

    .search-box {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        max-width: 800px;
        width: 90%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 30px;
        padding: 10px 20px;
        background-color: #fff;
        transition: all 0.3s ease;

        &:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .el-input {
            flex: 1;
            min-width: 200px;
        }

        .el-button {
            border-radius: 25px;
            font-weight: bold;
            white-space: nowrap;
        }
    }
}

.box {
    .goods-list {
        display: flex;
        flex-wrap: wrap;
        margin-left: auto;
        margin-right: auto;
        gap: 20px;
        justify-content: center;
    }

    .goods-item {
        width: calc(50% - 10px);
        box-sizing: border-box;
        border: 1px solid #eee;
        padding: 10px;
        border-radius: 8px;
        text-align: center;
        background-color: #f9f9f9;
        transition: box-shadow 0.3s;

        &:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }

        .goods-img {
            width: 100%;
            height: 160px;
            object-fit: contain;
            margin-bottom: 10px;
        }

        .goods-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .goods-price {
            color: #e60012;
            font-size: 14px;
        }
    }
}
</style>
